<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="../../../lib/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="../../../lib/bootstrapTable/bootstrap-table.css">

</head>
<body>
<!--
   1. 面包屑
   2. 搜索区
   3. table
   4. （modal）
-->
<div class="container-fluid">
    <div class="row">
         <ol class="breadcrumb">
             <li><a href="../index.html">主页</a></li>
             <li>系统设置</li>
             <li>角色管理</li>
         </ol>
    </div>

        <form class="form-horizontal"> <!--container-->
            <div class="form-group"> <!--row-->
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">
                        角色名称
                    </label>
                    <div class="col-sm-8">
                        <input class="form-control" id="roleNameForQuery"/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">
                        是否启用
                    </label>
                    <div class="col-sm-8">
                        <!--Switch-->
                        <select class="form-control" id="sltIsUsed">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-8">
                    <button class="btn btn-success" style="width:50%" id="btnQuery" type="button">搜索</button>
                </div>
            </div>
        </form>

    <div class="row">
            <table id="list"></table>
    </div>
</div>

<div id="toolbar" class="btn-group">
    <button class="btn btn-success" id="btnAdd">添加</button>
    <button class="btn btn-warning">修改</button>
    <button class="btn btn-info">启用</button>
    <button class="btn btn-primary">禁用</button>
    <button class="btn btn-danger">移除</button>
</div>

<div class="modal fade" id="info">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-title">
                <h3>添加角色</h3>
            </div>

            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-4">角色名称</label>
                        <div class="col-md-8">
                             <input class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">是否启用</label>
                        <div class="col-md-8">
                            <select class="form-control"></select>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">

                <button class="btn btn-success" id="btnSave">
                    确定
                </button>
                <button class="btn btn-warning">
                     取消
                </button>
            </div>

        </div>


    </div>

</div>

</body>
<script src="../../../lib/jquery.js"></script>
<script src="../../../lib/bootstrap/js/bootstrap.js"></script>
<script src="../../../lib/bootstrapTable/bootstrap-table.js"></script>
<script src="../../../lib/mock.js"></script>
<script src="../../../mock/system/role.js"></script>
<script src="../../../js/system/role.js"></script>

</html>